<template>
<el-dialog title="岗位选择" :visible.sync="displayFlag" width="80%" :before-close="handleClose">
    <el-row :gutter="20">
        <el-button size="small" class="filter-item" type="primary" @click="getList">查 询</el-button>
        <el-button size="small" class="filter-item" type="primary" @click="handleClose">关 闭</el-button>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="5">
            <div>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>组织机构树</span>
                    </div>
                    <div>
                        <el-tree ref='tree' :data="treeData" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node='false' node-key="id" :highlight-current='true'></el-tree>
                    </div>
                </el-card>
            </div>
        </el-col>
        <el-col :span="19">
            <div>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>查询列表</span>
                    </div>
                    <div>
                        <el-table :key='tableKey' :data="list" v-loading="listLoading" size="small"
                         element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%;border:#eeeeee">
                            <el-table-column type="index" width="50" label="序号" align="center">
                            </el-table-column>
                            <el-table-column align="center" label="岗位名称" min-width="150px" prop="name">
                                <template slot-scope="scope">
                                      <span>{{scope.row.name}}</span>
                                    </template>
                            </el-table-column>
                            <el-table-column align="center" label="岗位编码" width="150px" prop="jobtitleId">
                                <template slot-scope="scope">
                                      <span>{{scope.row.code}}</span>
                                    </template>
                            </el-table-column>
                            <el-table-column align="center" label="岗位类型" width="150px" prop="joblevelId">
                                <template slot-scope="scope">
                                      <span>{{scope.row.groupType | groupTypeFilter}}</span>
                                    </template>
                            </el-table-column>
                            <el-table-column align="center" label="内建岗位" width="150px" prop="joblevelId">
                                <template slot-scope="scope">
                                      <span>{{scope.row.innerFlag | yesOrNoFilter}}</span>
                                    </template>
                            </el-table-column>
                            <el-table-column align="center" label="操 作" width="60" class-name="small-padding fixed-width">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click="handleSelected(scope.row)">选择</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination-container">
                            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                            </el-pagination>
                        </div>
                    </div>
                </el-card>
            </div>
        </el-col>
    </el-row>
</el-dialog>
</template>

<script>
import {
  compositeSelect,
  getOrgTree
} from '@/api/common/groupSelect'
import {
  statusOptions,
  statusKeyValue,
  yesOrNoOptions,
  yesOrNoKeyValue,
  groupTypeOptions,
  groupTypeKeyValue
} from '@/utils/allOptions'
export default {
  components: {},
  props: {
    displayFlag: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    displayFlag() {
      if (this.displayFlag) {
        getOrgTree().then(response => {
          this.treeData = response.data.data
        })
        this.list = null
        this.total = 0
      }
    }
  },
  data() {
    return {
      // -------Options-----------
      statusOptions,
      yesOrNoOptions,
      groupTypeOptions,
      // -------Options-----------
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      clickType: '',
      currentNode: '',
      currentData: '',
      selectId: '',
      // table list
      tableKey: 0,
      list: null,
      listQuery: {
        rowBounds: {
          offset: 1,
          limit: 20
        },
        condition: {
          subsysid: {
            property: 'ouinfoId',
            value: '',
            type: 'EQ'
          }
        },
        fields: [
          'id',
          'innerFlag',
          'name',
          'code',
          'groupType'
        ],
        sort: [{
          direction: 'ASC',
          property: 'id'
        }]
      },
      total: null,
      listLoading: false
      // table list
    }
  },
  // 画面刚进入method
  mounted() {},
  filters: {
    statusFilter(target) {
      return statusKeyValue[target]
    },
    yesOrNoFilter(target) {
      return yesOrNoKeyValue[target]
    },
    groupTypeFilter(target) {
      return groupTypeKeyValue[target]
    }
  },
  methods: {
    resetInfo() {},
    handleNodeClick(data, node) {
      this.currentNode = node
      this.currentData = data
      this.listQuery.condition.subsysid.value = data.id
      this.getList()
    },
    handleSelected(row) {
      this.$emit('closeMe', row.id, row.name)
    },
    handleClose(done) {
      this.$emit('closeMe')
    }, // 检索条件框回车键按下后，跳转到首页
    handleFilter() {
      this.listQuerypage = 1
      this.getList()
    },
    // 翻页器使用
    handleSizeChange(val) {
      this.listQuerypage = 1
      this.listQuery.rowBounds.limit = val
      this.getList()
    },
    // 翻页器使用
    handleCurrentChange(val) {
      this.listQuerypage = val
      this.listQuery.rowBounds.offset =
                this.listQuery.rowBounds.limit * (val - 1) + 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      const that = this
      compositeSelect(this.listQuery).then(response => {
        const records = response.data.data.records
        const editlist = new Array(0)
        if (response.data.data.count > 0) {
          for (const item of records) {
            const input = {}
            for (const elem of that.listQuery.fields.values()) {
              input[elem] = item[elem]
            }
            editlist.push(input)
          }
        }
        this.list = editlist
        this.total = response.data.data.count
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}

.box-card {
    width: 100%;
}
</style>
